﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Skins/Admin/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcSiteMapNode>" %>
<%@ Import Namespace="Oxite.Extensions"%>
<%@ Import Namespace="ECube.Web.CMS" %>
<%@ Import Namespace="ECube.Web.CMS.Extensions" %>
<%@ Import Namespace="ECube.Web.CMS.Models" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Title" runat="server">
    <%=Html.PageTitle((string)ViewData["Title"]) %>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="HeadCssFiles" runat="server">
<link href='<%= Url.Content(@"~/Scripts/jquery.ui/themes/ui-lightness/jquery.ui.all.css") %>' rel="stylesheet" type="text/css" />
<link href='<%= Url.Content(@"~/Style/base.css") %>' rel="stylesheet" type="text/css" />
<style type="text/css">
    .ui-button{margin: 2px 4px;padding: 2px;text-decoration: none;cursor: pointer;position: relative;text-align: center;}
    .ui-dialog .ui-state-highlight, 
    .ui-dialog .ui-state-error{padding: 4px;}
    .portlet{padding: 10px;}
    .portlet-header{padding: 4px;margin-bottom: 6px;}
</style>
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="HeadScripts" runat="server">
<script src="<%= Url.Content("~/Scripts/jquery.form.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content(@"~/Scripts/jquery.ui/ui/jquery-ui-1.8.custom.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content(@"~/Scripts/jsTree/jquery.tree.js") %>" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="header" ContentPlaceHolderID="ContentHeader" runat="server">
<h2><%= Html.Encode(ViewData["Title"]) %></h2>
<hr />
</asp:Content>

<asp:Content ID="main" ContentPlaceHolderID="MainContent" runat="server">
<div  style="margin-right:0.7em;" >
    <div style="margin:10px 0px;">
        <button id="btn-create-sub" class="ui-button ui-state-default ui-corner-all"> 新建子节点 </button>  
        <button id="btn-delete" class="ui-button ui-state-default ui-corner-all"> 删除 </button>      
    </div>
    <div class="ui-widget-content ui-corner-all" style="width:25%;float:left;padding:5px 0px;">
         <div id="nodetree" selectedid="node_<%=Model.Key %>">
            <ul>
                <%= GenSiteNodeTree(Model)%>
            </ul>
         </div>
    </div>
    <div style="width:73.5%;float:right;">  
        <div id="tabs" style="min-height:200px;">
            <% Html.RenderPartialFromSkin("Item",Model.ToInput()); %>       
        </div>
    </div>
</div>
<div id="dialog_delete" title="删除?" style="display:none;">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
	是否删除选中的节点？
	</p>
</div>
</asp:Content>

<asp:Content ID="Content9" ContentPlaceHolderID="Scripts" runat="server">
<script type="text/javascript">

  function initTab(tabid,isNew)
  {
      var li="";
      $(tabid +">div[id^='tabs-']").each(function(){
        li+="<li><a href='#" + $(this).attr("id") + "'>" + $(this).attr("title") + "</a></li>";
      });
      if(li.length > 0)
      {
        $(tabid).prepend("<ul>"+li+"</ul>");
      }
      $(tabid).tabs('destroy'); 
      if(isNew)
      {
         $(tabid).tabs();
      }else
      {
         $(tabid).tabs({selected:$(tabid).attr("selected")});  
      }
     
  }//function initTab
  
  function initForm(){
      $(".ui-button").hover(function() {$(this).addClass("ui-state-hover");  },
			                function() {$(this).removeClass("ui-state-hover");})
			        .mousedown(function() { $(this).addClass("ui-state-active");})
		            .mouseup(function() {$(this).removeClass("ui-state-active");});
	
	 $("#frm-sitenode").find("select,:text").css("width","320px");
	 
	 var allFormOptions = window.mvcClientValidationMetadata;
     if (allFormOptions) {
        while (allFormOptions.length > 0) {
            var thisFormOptions = allFormOptions.pop();
            __MVC_EnableClientValidation(thisFormOptions);
        }
     }
        
	 $('#frm-sitenode').ajaxForm({
            beforeSubmit:function(formData, jqForm, options){
                var v =  jqForm.validate();
                return v.form();
            },
            success:function(result){
                 $("#tabs").html(result);
                 initTab("#tabs");
                 initForm();
                 
                 var status = $("#frm-sitenode #Status").val();
                 if(status === "Changed"){
                     var key=$("#frm-sitenode #Key").val();
                     var title=$("#frm-sitenode #Title").val();
                     var nodeid="#node_"+key;
                     var node = $(nodeid);
                     
                     $.tree.reference("#nodetree").rename(nodeid,title);
                     if(node.attr("isNew") === "true"){
                        node.removeAttr("isNew");
                        node.attr("id","#node_"+key);
                        node.attr("key",key);                               
                     }
                 }
            }
        }
    );
    $('#IsMvcAction').bind("click",function(){
        if($(this).attr("checked")==true){
            $('#urlContainer').hide();
            $('#mvcContainer').show();
        }else{            
            $('#urlContainer').show();
            $('#mvcContainer').hide();
        }
        
    });
  }//function initForm
 
  $(document).ready(function() {
      
      var serverurl="<%= Url.Action("Item","SiteNavigator")%>/";      
      $("#nodetree").tree({
            selected:"node_<%= Model.Key%>",
            callback:{
                onselect: function(node, tree) {
                    var nodeid = $(node).attr("id"); 
                    var selectedid = tree.container.attr("selectedid");
                    if(selectedid !== undefined){
                        var selectednode = $("#"+selectedid);
                        if(selectednode.attr("isNew") == "true") {
                            tree.remove(selectednode);   
                        }
                    }
                    if(selectedid === nodeid){
                        return false;
                    }else{
                        tree.container.attr("selectedid",nodeid)
                    }
                                 
                    if($(node).attr("isNew") === "true") return false;
                    var selectedNodeKey =$(node).attr("key");
                    // $("#tabs").html("<p><img src='<%= Url.Content("~/Content/images/ajax-loader.gif")%>' width='220' height='19'/></p>");
                     $("#tabs").attr("selected",$("#tabs").tabs('option', 'selected'));
                     $("#tabs").load(serverurl+selectedNodeKey,function(){
                        initTab("#tabs");
                        initForm();
                     });                     
                },
                onmove:function(NODE, REF_NODE, TYPE, TREE_OBJ,RB){
                    $.post("<%= Url.Action("Move","SiteNavigator")%>",
                         {sourcekey:$(NODE).attr("key"),targetkey:$(REF_NODE).attr("key"),position:TYPE},
                         function(result){
                             if(result!=="true"){ 
                                $.tree.rollback(RB);
                             }                        
                         });              
                    
                }
            }
      });
      $.tree.reference("#nodetree").open_all();
      
      initTab("#tabs");
      initForm();
      
      $("#tabs").ajaxError(function(event,request, settings){
        $(this).html("<div>出错页面:" + settings.url + "</div>");
        $(this).append(request.responseText);
      });
      
          
      $("#btn-create-sub").click(function() {
         var parentkey = $($.tree.focused().selected[0]).attr("key");
         
         $.post("<%= Url.Action("AddNode","SiteNavigator")%>",
             {ParentKey:parentkey,Title:"新节点",Status:"New"},
             function(result){
                $("#tabs").html(result);
                var key=$("#frm-sitenode #Key").val();
                var title=$("#frm-sitenode #Title").val();
                var jqTree =  $.tree.reference("#nodetree");
                var parent = "#" +jqTree.selected[0].id;
                jqTree.create({attributes: { id:"node_"+key,key:key,isNew:"true"}, data:title},parent , -1);
                jqTree.select_branch("#node_"+key);
                initTab("#tabs",true);
                initForm();
             }
         );
      });
      
      $("#dialog_delete").dialog({
			bgiframe: true,
			resizable: false,
			autoOpen: false,
			minHeight:140,
			modal: true,
			overlay: {backgroundColor: '#000',opacity: 0.5},
			buttons: {
			    '取消': function() {
					$(this).dialog('close');
				},
				'删除': function() {
				    var jqTree =  $.tree.reference("#nodetree");
				    var key = $(jqTree.selected[0]).attr("key");
                    $.post("<%=Url.Action("Remove","SiteNavigator") %>", { key: key },
                            function(data) {
                                $("#dialog_delete").dialog('close'); 
                                if (data == 'true'){
                                  jqTree.remove("#node_" + key);
                                }else{
                                    alert("删除失败！");                                
                                }                         
                                                               
                    });
				}				
			}
		});

      $("#btn-delete").click(function() {
             $("#dialog_delete").dialog('open');
             return false;
      });
      
      $("#Url").live("keyup",function(){
            var value = $("#Url").val();
            $.ajax({
                type: "POST",
                data: { field:"url",value:value },
                url: "<%=Url.Action("Check","SiteNavigator") %>",
                beforeSend: function(){
                   // $("#Urlinfo").html("正在校验…");
                },
                dataType: "json",  
                success: function(data){
                    if(data.success == false){
                        $("#Urlinfo").html(data.message);
                    }  
                    else{
                        $("#Urlinfo").html("通过");
                    }                 
                }
            });
        });      
      
 });  //$(document).ready
</script>
</asp:Content>

<script runat="server">   
    private string GenSiteNodeTree(MvcSiteMapNode node)
    {
        string sub = "";
        foreach (MvcSiteMapNode n in node.ChildNodes)
        {
            sub += GenSiteNodeTree(n);            
        }
        if (!string.IsNullOrEmpty(sub))
        {
            sub = "<ul>" + sub + "</ul>";
        }
        return string.Format("<li id='node_{0}' key='{0}'><a href='#'>{1}</a>{2}</li>", node.Key, node.Title, sub);
    }   
</script>